<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <div id="gg">{{msg}}</div>
      <div>{{ hehe }}</div>
      <div v-text="msg"></div>
      <button @click="update()">更新</button>
      <button @click="destroy()">销毁</button>
      <button @click="emitMyClick()">触发$on绑定的myClick事件</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      /*
      Vue实例的生命周期
      
    */
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "生命周期",
        },
        methods: {
          emitMyClick() {
            // 触发自定义事件
            this.$emit("myClick", "myClick实参");
          },
          update: function () {
            console.log("update");
            this.msg = "hello";
          },
          destroy: function () {
            console.log("destyory.....");
            this.$destroy();
          },
        },
        computed: {
          hehe() {
            return this.msg.toUpperCase();
          },
        },
        watch: {
          msg() {
            console.log(this.msg, "watch.msg");
          },
        },
        beforeCreate: function () {
          console.log("----------------beforeCreate（拿不到data）----------------");
          console.log(this.msg);
        },
        created: function () {
          console.log("----------------created（可以拿到data，但拿不到$el，此时dom还没有绑定上去，并且dom还没有经过Vue解析）----------------");
          console.log(this.msg, this.$el, document.querySelector("#app").outerHTML);
        },
        beforeMount: function () {
          console.log("----------------beforeMount（可以拿到$el，但dom也还没有经过Vue解析）----------------");
          console.log(this.$el.outerHTML);
        },
        mounted: function () {
          console.log("----------------mounted（dom已经过Vue解析，并且渲染到页面中了）----------------");
          console.log(this.$el.outerHTML);
        },
        beforeUpdate: function () {
          console.log("----------------beforeUpdate（最新的数据还没有更新到dom上，dom上还是老数据）----------------");
          console.log(this.$el.outerHTML);
        },
        updated: function () {
          console.log("----------------updated（最新的数据已经更新到dom上了）----------------");
          console.log(this.$el.outerHTML);
        },
        beforeDestroy: function () {
          console.log("----------------beforeDestroy（实例仍然完全可用）----------------");
        },
        destroyed: function () {
          console.log("----------------destroyed（实例所有的数据响应式监听和事件监听会被移除）----------------");
          console.log("----------------destroyed（这里所说的事件监听不是说的DOM事件，而是说的通过Vue的事件API绑定的事件，如：$on、$once）----------------");
        },
      });

      // 调用$destroy()后，该事件将被销毁
      vm.$on("myClick", function (msg) {
        this.msg = msg;
      });
    </script>
  </body>
</html>
